<template>
    <div class="nvzhuang-container">
        <div class="container-banner">
            <img src="https://img01.yzcdn.cn/upload_files/2021/10/29/FnCF49FzD_x31l8Iv3_40qdMDeab.jpg!large.webp" alt="">
        </div>
        <div class="container-list">
            <ul>
                <li v-for="(item,index) in List" :key="index">
                    <img :src="item.img" alt="">
                    <br>
                    {{ item.test }}
                </li>
            </ul>
        </div>
        
    </div>
</template>

<script>
    export default {
        data(){
            return{
                List:[
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FoYmIMRLj9wqtcEuYpKonlxH6I13.jpg!middle.webp',
                        test:'法兰绒衬衫'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/09/15/FonWoEhph2uORoPxzixqvEEpZYNQ.jpg!middle.webp',
                        test:'体闲衬衫'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FrE6H65_xdMS1VR-sX78uC2s4f6V.jpg!middle.webp',
                        test:'卫衣'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FuDdWtra_bhFVzU1-87FxucuKLj9.jpg!middle.webp',
                        test:'大衣'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FoYmIMRLj9wqtcEuYpKonlxH6I13.jpg!middle.webp',
                        test:'法兰绒衬衫'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/09/15/FonWoEhph2uORoPxzixqvEEpZYNQ.jpg!middle.webp',
                        test:'体闲衬衫'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FrE6H65_xdMS1VR-sX78uC2s4f6V.jpg!middle.webp',
                        test:'卫衣'
                    },
                    {
                        img:'https://img01.yzcdn.cn/upload_files/2021/02/05/FuDdWtra_bhFVzU1-87FxucuKLj9.jpg!middle.webp',
                        test:'大衣'
                    },
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
.nvzhuang-container{
    width: 100%;
    .container-banner{
        position: relative;
        img{
            width: 600px;
            height: 200px;
            position: absolute;
            left: 30px;
            top: 20px;
        }
    }
    .container-list{
        position: relative;
        top: 240px;
        ul{
            width: 700px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            li{
                font-size: 30px;
                text-align: center;
                width: 220px;
                height: 250px;
                img{
                    width: 200px;
                    height: 200px;
                }
            }
        }
    }
}
</style>